<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剖析Node对象</title>
    <style type="text/css">
        .container {
            border: 1px solid blue;
            margin: 15px;
        }
        
        .container div {
            line-height: 36px;
            border-bottom: 1px solid #dedede;
        }
    </style>
</head>

<body>

    <div class="container first">
        <h3>Node</h3>
    </div>

    <div class="container second">
        <h3>Node.prototype</h3>
    </div>

    <script type="text/javascript">
        // 选择页面上 class 属性取值中 包含 first 的第一个元素
        let firstContainer = document.querySelector('.first');

        // Node 是属于 Web API 中的内容，通常由浏览器提供
        let names = Object.getOwnPropertyNames(Node);
        let f1 = function(e) {
            // 使用 documnet 提供的支持来创建一个新的 HTMLDivElement实例
            let d = document.createElement('div');
            // 将 属性名称 作为 文本 设置到 div 元素中
            d.innerText = 'Node.' + e;
            // 将新创建的 div 添加到 firstContainer 内部的末尾
            firstContainer.appendChild(d);
        }
        names.forEach(f1);

        /* - - -  - - -  - - -  - - -  - - -  - - -  - - - */
        //回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）
        let descriptor = Object.getOwnPropertyDescriptor(Node, 'ELEMENT_NODE');
        console.log(descriptor);

        /* - - -  - - -  - - -  - - -  - - -  - - -  - - - */

        // 选择页面上 匹配于 .second 选择器 的第一个元素
        let secondContainer = document.querySelector('.second');

        let props = Object.getOwnPropertyNames(Node.prototype);
        let f2 = function(e) {
            // 使用 documnet 提供的支持来创建一个新的 HTMLDivElement实例
            let d = document.createElement('div');
            // 将 属性名称 作为 文本 设置到 div 元素中
            d.innerText = 'Node.prototype.' + e;
            // 将新创建的 div 添加到 secondContainer 内部的末尾
            secondContainer.appendChild(d);
        }

        props.forEach(f2);
    </script>
</body>

</html>